<template>
  <view class="pop-info-wrap">
    <!-- 弹窗 头像昵称填写 -->
    <u-popup
      ref="popup_avatar_nick"
      :show="show_avatar_nick"
      :overlay="true"
      mode="bottom"
      :closeable="false"
      :closeOnClickOverlay="false"
      bgColor="#ffffff"
      round="0"
      @close="handleClose"
      @open="handleOpen">
      <view class="info-modal-wrap">
        <view class="info-modal-inner">
          <view class="modal-head flex-between">
            <view class="title-box flex">
              <image
                src="@/static/login/pop-logo.png"
                mode=""
                class="pop-logo"></image>
              <text>
                <!-- 崔工工具 -->
                {{ vuex_config.site_name }}
              </text>
            </view>
            <view class="close-box">
              <image
                src="@/static/login/close.png"
                mode=""
                class="modal-close"
                @click="close_pop()"></image>
            </view>
          </view>

          <view class="modal-ctx">
            <view class="main-title">请完善您的基本信息</view>
            <view class="form-box">
              <view class="form-item" style="padding-bottom: 24rpx">
                <view class="item-mask">
                  <!-- #ifdef WEB -->
                  <button
                    class="btn-mask"
                    open-type=""
                    @click="doUploadAvatar()"></button>
                  <!-- #endif -->

                  <!-- #ifndef WEB -->
                  <button
                    class="btn-mask"
                    open-type="chooseAvatar"
                    @chooseavatar="onChooseAvatar"></button>
                  <!-- #endif -->
                </view>
                <view class="label">头像</view>
                <view class="val">
                  <view class="avatar-box">
                    <image
                      v-if="user.image"
                      :src="user.image"
                      class="avatar-image"
                      mode="aspectFill"></image>
                    <image
                      v-else
                      src="@/static/common/avatar.png"
                      class="avatar-image"
                      mode="aspectFill"></image>
                  </view>
                </view>
                <view class="arrow-box">
                  <image
                    src="@/static/login/pop-arrow.png"
                    mode=""
                    class=""></image>
                </view>
              </view>
              <view class="form-item">
                <view class="label">昵称</view>
                <view class="val">
                  <input
                    v-model="user.nickname"
                    class="input-nick"
                    type="nickname"
                    @blur="handleGetNick"
                    placeholder="输入昵称"
                    placeholder-class="input-p" />
                </view>
              </view>
            </view>
            <view class="btn-submit flex-center" @click="submit_avatar_nick()">
              保存
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 弹窗 头像昵称填写 -->
  </view>
</template>

<script>
import util from "@/plugin/util.js";

export default {
  components: {},
  data() {
    return {
      user: {
        image: "",
        nickname: "",
      },
      show_avatar_nick: false,
    };
  },
  watch: {},
  methods: {
    init() {
      this.user.image = this.mix_user_origin_avatar;
      this.user.nickname = this.mix_user_nick;

      this.show_avatar_nick = true;
    },

    handleClose() {},
    handleOpen() {},

    //处理头像
    onChooseAvatar(e) {
      console.log("头像获取", e);
      let file = e.detail.avatarUrl;

      this.$apiUpload({
        url: "/upload",
        method: "post",
        data: {
          //action: 'index_localUpload', //login
          file,
          // if_touxiang: 1
        },
      }).then((res) => {
        if (res.code == 200) {
          let { path } = res.data;
          this.user.image = path;
          // this.edit_avatar_nick(path);
        }
      });
    },

    // 本地上传
    doUploadAvatar() {
      // util.handleUploadImage({
      // 	count: 1,
      // 	fileKey: 'img',
      // 	data: {
      // 		if_touxiang: 1,
      // 	},
      // 	successCallback: (res) => {
      // 		console.log('successCallback res', res)
      // 		let path = res.data;
      // 	}
      // });

      uni.chooseImage({
        count: 1,
        mediaType: ["image"], // 图片
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 从相册选择
        success: (res) => {
          console.warn("选择图片", res);
          res.tempFilePaths.forEach((file) => {
            this.$apiUpload({
              url: "//upload",
              method: "post",
              data: {
                //action: 'index_localUpload',
                file,
                // if_touxiang: 1,
                // ...option.data
              },
            }).then((res) => {
              if (res.code == 200) {
                // option.successCallback(res)
                let { path } = res.data;
                this.user.avatar = path;
                this.user.image = path;
              }
            });
          });
        },
      });
    },

    //提交头像昵称
    edit_avatar_nick(image) {
      var parmas = {
        image: image,
        // nickname: '',
      };
      this.$api({
        url: "/service.php",
        method: "post",
        data: {
          action: "users_editInfo",
          ...parmas,
        },
      }).then((res) => {
        this.$logjson("users_editInfo", res);
        if (res.code == 200) {
          this.$store.commit("edit_vuex_user", parmas);
        }
      });
    },

    //昵称
    handleGetNick(e) {
      console.log("昵称获取", e);
      this.user.nickname = e.detail.value;
    },

    //提交头像昵称
    submit_avatar_nick() {
      var parmas = {
        image: this.user.image,
        name: this.user.nickname,
      };
      if (!parmas.image) {
        this.$alert("请设置头像");
        return;
      }
      if (!parmas.name) {
        this.$alert("请填写昵称");
        return;
      }

      this.$api({
        url: "/updateUser",
        method: "post",
        data: {
          //action: 'users_editInfo',
          ...parmas,
        },
      }).then((res) => {
        this.$logjson("users_editInfo", res);
        if (res.code == 200) {
          this.$store.commit("edit_vuex_user", {
            ...parmas,
            name: parmas.nickname,
          });
          // this.getInfo();
          this.show_avatar_nick = false;
          this.$emit("confirm");
        }
      });
    },

    //完善资料后更新信息
    close_pop() {
      this.show_avatar_nick = false;
    },
  },
};
</script>

<style lang="scss" scoped>
// 用户完善头像昵称弹窗

.pop-info-wrap {
  // position: relative;
  // z-index: 100;
}

.info-modal-wrap {
  background: #f8f8f8;
  width: 100%;
  position: relative;
  text-align: left;
  padding-bottom: 32rpx;
  // padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

  .info-modal-inner {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
    padding: 60rpx 46rpx;
    padding-bottom: 20rpx;
    min-height: 600rpx;
    background: #f8f8f8;
  }
}

.modal-head {
  .title-box {
    image {
      width: 44rpx;
      height: 44rpx;
    }

    text {
      margin-left: 16rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
  }

  .close-box {
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.modal-ctx {
  width: 100%;
  background: #f8f8f8;
  padding: 0;
  align-items: left;
  padding-top: 38rpx;

  .main-title {
    text-align: left;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }

  .form-box {
    padding-top: 58rpx;

    .form-item {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      min-height: 96rpx;
      border-bottom: 2rpx solid #dcdcdc;

      .item-mask {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 0;

        .btn-mask {
          display: flex;
          width: 100%;
          height: 100%;
        }
      }

      .label {
        width: fit-content;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
      }

      .val {
        flex: 1;
        overflow: hidden;
        padding-left: 40rpx;

        input {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #000;
        }

        .input-p {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #828282;
        }
      }

      .arrow-box {
        position: absolute;
        right: 0;

        image {
          width: 13rpx;
          height: 22rpx;
        }
      }

      .avatar-box {
        width: 80rpx;
        height: 80rpx;
        background: #ffffff;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }

  .btn-submit {
    margin-top: 64rpx;
    width: 100%;

    height: 80rpx;
    background: #cb0011;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
  }
}

// 用户完善头像昵称弹窗

.footer-terms {
  margin-top: 40rpx;
  margin-top: 16rpx;
  // position: fixed;
  // left: 0;
  // bottom: 88rpx;
  text-align: center;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 34rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #666;

  .terms-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;

    .image-check {
      margin-right: 10rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }

  .agreement_info {
    color: #fff;
    color: #004281;
  }
}
</style>
